<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ajax新闻列表-练习</title>
		<style type="text/css">
			#sp{font: 28px/60px "微软雅黑";margin: 30px auto;display: block;text-align: center;}
			html{background: #ddf;}
			#btn{display: block;width: 1000px;height: 50px;border-radius: 5px;background: #222;;font:16px/24px "微软雅黑";margin: 30px auto;border: 0;box-shadow: 0 0 5px #000;color: #FFFFFF;letter-spacing: 8px;}
			#list{width:1000px;margin: 20px auto;padding: 0;}
			#list li{list-style:none;box-shadow: 0 0 5px #000;padding:10px 20px;margin-bottom: 20px;text-indent:2em ;position: relative;background: #fff;border-radius: 5px;}
			#list li span{display: block;width:100px;font: 14px/20px "微软雅黑";color: #666;position: absolute;right: 20px;top: 30px;}
		</style>
	</head>

	<body>
		<span id="sp">ReadHub新闻官网</span>
		<ul id="list">
		</ul>
		<button id = 'btn'>加载更多</button>
	</body>

</html>
<script type="text/javascript">
	var oList = document.getElementById('list');
	var url = 'https://api.readhub.me/topic?pageSize=10';
	var lastOrder = 0;
	var loadmore = document.getElementById('btn');
	var xmr = new XMLHttpRequest();
	xmr.open('GET', url, true);
	xmr.send(null);
	xmr.onreadystatechange = function() {
		if(xmr.readyState == 4 && xmr.status == 200) {
			var jsonStr = xmr.responseText;
			var jsonObj = JSON.parse(jsonStr);
					console.log(jsonObj);
			lastOrder = jsonObj.data[jsonObj.data.length-1].order;
			var arr = jsonObj.data.map(function(value) {
				console.log(value);
				var d = new Date(value.createdAt);
				console.log(d);
				var dateStr = getTimeAgo(d);
				return `<li>
					<h3>${value.title}</h3>
					<p>${value.summary}</p>
					<span>${agoTime}</span>
				</li>`
			})
			console.log(arr);
			oList.innerHTML = arr.join('');
		}		
	}
	loadmore.onclick = function(){
		more();	
	}
	function more(){
		var url = 'https://api.readhub.me/topic?lastCursor='+lastOrder+'pageSize=10';
		var xmr = new XMLHttpRequest();
		xmr.open('GET', url, true);
		xmr.send(null);
		xmr.onreadystatechange = function() {
			if(xmr.readyState == 4 && xmr.status == 200) {
				var jsonStr = xmr.responseText;
				var jsonObj = JSON.parse(jsonStr);
						console.log(jsonObj);
				lastOrder = jsonObj.data[jsonObj.data.length-1].order;
				var arr = jsonObj.data.map(function(value) {
					console.log(value);
					var d = new Date(value.createdAt);
					console.log(d);
					var dateStr = getTimeAgo(d);
					return `<li>
						<h3>${value.title}</h3>
						<p>${value.summary}</p>
						<span>${agoTime}</span>
					</li>`
				})
				console.log(arr);
				oList.innerHTML += arr.join('');
			}		
		}	
	}
	
	
	
	
	
	
	
	
	
	
	function getTimeAgo(date) {
		var now = new Date();
		var time = now.getTime() - date.getTime();
		var minutes = Math.floor(time / 1000 / 60);
		//var agoTime = '';
		if(minutes < 60) {
			agoTime = minutes + '分钟前';
		} else if(minutes < 60 * 24) {
			agoTime =  parseInt(minutes / 60) + '小时前';
		} else if(minutes < 60 * 24 * 30) {
			agoTime =  parseInt(minutes / 60 / 24) + '天前';
		} else if(minutes < 60 * 24 * 365) {
			agoTime =  parseInt(minutes / 60 / 24 / 30) + '月前';
		} else {
			agoTime =  date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getdate() + '日';
		}
		return agoTime;
	}
</script>